<!-- 组件说明 -->
<template>
  <div>
    <div class="container" v-if="hotelData.id">
      <div class="hotel_detail">
        <!-- 面包屑导航 -->
        <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
          <el-breadcrumb-item>{{ hotelData.real_city }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ hotelData.name }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 酒店信息 -->
        <div class="hotel_info">
          <div class="name">
            {{ hotelData.name }}
            <div class="huangguan" v-if="hotelData.hotellevel">
              <i
                v-for="(item, index) in hotelData.hotellevel.level"
                :key="index"
                class="iconfont iconhuangguan"
              ></i>
            </div>
          </div>
          <div class="name_spell">{{ hotelData.alias }}</div>
          <div class="site">
            <i class="iconfont el-icon-location"></i>
            {{ hotelData.address }}
          </div>
        </div>

        <!-- 酒店图片展示 -->
        <div class="hotel_show">
          <div class="main_pic">
            <img :src="hotel_pic" alt="" />
          </div>
          <div class="list_pics">
            <a
              href="javaScript:;"
              v-for="(item, index) in pics"
              :key="index"
              class="pic"
              @click="handleImg(index)"
            >
              <img :src="item.img_url" alt="" />
            </a>
          </div>
        </div>

        <!-- 酒店价格信息 -->
        <el-table :data="products" class="hotel_price" style="width: 100%">
          <el-table-column prop="name" label="价格来源"> </el-table-column>
          <el-table-column prop="bestType" label="低价房型"> </el-table-column>
          <el-table-column label="最低价格/每晚">
            <template slot-scope="scope">
              <span class="price" style="color: orange"
                >￥ {{ scope.row.price }}
              </span>
              <span style="margin-left: 10px">起</span>
              <span class="el-icon-arrow-right" style="color: orange"> </span>
            </template>
          </el-table-column>
        </el-table>

        <!-- Map地图 -->
        <Amap :hotelLocation="hotelData.location" :name="hotelData.name"></Amap>

        <!-- 酒店信息 -->
        <div class="hotel_cont">
          <el-form label-width="80px">
            <el-form-item label="基本信息">
              <div class="time">
                <div>
                  <span v-if="hotelData.enterTime != 'null'"
                    >入住时间:{{ hotelData.enterTime }}</span
                  >
                  <span v-else>入住时间:14:00之后</span>
                </div>
                <div>
                  <span v-if="hotelData.leftTime != 'null'">离店时间:</span>
                  <span v-else>离店时间: 12:00之前</span>
                </div>
                <span
                  >{{ hotelData.creation_time }}/{{
                    hotelData.renovat_time
                  }}</span
                >
                <span>酒店规模: {{ hotelData.roomCount }} 间房</span>
              </div>
            </el-form-item>
            <el-form-item label="主要设施">
              <el-tag
                v-for="item in hotelData.hotelassets"
                :key="item.id"
                type="info"
                class="tag"
              >
                {{ item.name }}
              </el-tag>
            </el-form-item>
            <el-form-item label="停车服务">- </el-form-item>
            <el-form-item label="品牌信息">
              <div v-if="hotelData.hotelbrand">
                {{ hotelData.hotelbrand.name }}
              </div>
              <div v-else>-</div>
            </el-form-item>
          </el-form>
        </div>

        <!-- 用户评价 -->
        <div class="user_evaluate">
          <div class="evaluate_total">
            {{ hotelData.common_remarks }} 条评论
          </div>

          <div class="evaluate_info">
            <div class="left">
              <div>总评数: {{ totalRemark }}</div>
              <div>好评数: {{ hotelData.good_remarks }}</div>
              <div>差评数: {{ hotelData.bad_remarks }}</div>
            </div>
            <div class="average_score">
              <el-rate v-model="hotelData.stars" disabled text-color="#ff9900">
              </el-rate>
              <div class="mark" v-if="hotelData.stars >= 3">推荐</div>
              <div class="mark" v-else-if="hotelData.stars < 3">一般</div>
            </div>

            <div class="score">
              <div class="score_info">
                <div>环境</div>
                <span>{{ hotelData.scores.environment.toFixed(1) }}</span>
              </div>
              <el-progress
                type="circle"
                :width="80"
                :stroke-width="2"
                :percentage="hotelData.scores.environment * 10"
                :show-text="false"
                color="#ff9900"
              ></el-progress>
            </div>
            <div class="score">
              <div class="score_info">
                <div>产品</div>
                <span>{{ hotelData.scores.product.toFixed(1) }}</span>
              </div>
              <el-progress
                type="circle"
                :width="80"
                :stroke-width="2"
                :percentage="hotelData.scores.product * 10"
                :show-text="false"
                color="#ff9900"
              >
              </el-progress>
            </div>
            <div class="score">
              <div class="score_info">
                <div>服务</div>
                <span>{{ hotelData.scores.service.toFixed(1) }}</span>
              </div>
              <el-progress
                type="circle"
                :width="80"
                :stroke-width="2"
                :percentage="hotelData.scores.service * 10"
                :show-text="false"
                color="#ff9900"
              >
              </el-progress>
            </div>
          </div>
        </div>

        <!-- 用户评论 -->
        <div class="comment">
          <HotelComment
            v-for="item in commentList"
            :key="item.id"
            :commentData="item"
          ></HotelComment>
        </div>
      </div>
    </div>
    <div class="load_box" v-if="isLoading">
      <Loading></Loading>
    </div>
  </div>
</template>

<script>
import Amap from "../../components/hotel/Amap";
import HotelComment from "@/components/hotel/HotelComment";
import Loading from "@/components/Loading/index";
export default {
  components: {
    Amap,
    HotelComment,
    Loading,
  },
  data() {
    return {
      hotel_pic: "http://157.122.54.189:9093/images/hotel-pics/1.jpeg",
      pics: [
        { img_url: "http://157.122.54.189:9093/images/hotel-pics/1.jpeg" },
        { img_url: "http://157.122.54.189:9093/images/hotel-pics/2.jpeg" },
        { img_url: "http://157.122.54.189:9093/images/hotel-pics/3.jpeg" },
        { img_url: "http://157.122.54.189:9093/images/hotel-pics/4.jpeg" },
        { img_url: "http://157.122.54.189:9093/images/hotel-pics/5.jpeg" },
        { img_url: "http://157.122.54.189:9093/images/hotel-pics/6.jpeg" },
      ],
      products: [],
      hotelData: {},
      breadcrumb: {},
      isLoading: true,
      commentList: [],
    };
  },
  computed: {
    totalRemark() {
      return this.hotelData.good_remarks + this.hotelData.bad_remarks;
    },
  },
  async mounted() {
    await this.getHotelData();
    let commentData = await this.$axios({
      url: "/hotels/comments",
      params: {
        // hotel: this.$route.query.id,
        _limit: 5,
      },
    });
    this.commentList = commentData.data.data;
    this.isLoading = false;
  },
  methods: {
    getHotelData() {
      this.$axios({
        url: "/hotels",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        // console.log(res.data.data[0]);
        this.hotelData = res.data.data[0];
        this.products = this.hotelData.products;
      });
    },

    // 图片大图预览
    handleImg(index) {
      this.hotel_pic = this.pics[index].img_url;
    },
  },
};
</script>

<style lang='less' scoped>
.load_box {
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
}
.container {
  width: 1000px;
  margin: 0 auto;
  // 面包屑导航
  .breadcrumb {
    font-size: 16px;
    padding: 20px 0;
  }
}

// 酒店信息 文字
.hotel_info {
  font-size: 14px;
  color: #666;
  .name {
    color: #000;
    font-size: 24px;
    display: flex;
    align-items: flex-end;
    .huangguan {
      margin-left: 10px;
    }
    .iconfont {
      color: #ff9900;
    }
  }
}

// 酒店图片展示
.hotel_show {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
  .main_pic {
    min-width: 640px;
    height: 360px;
    padding-right: 20px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .list_pics {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin-left: -10px;
    .pic {
      width: 160px;
      height: 110px;
      margin-left: 15px;
      margin-bottom: 15px;
      &:hover {
        margin-top: -2px;
        box-shadow: 2px 2px 10px 4px #888888;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

// 酒店价格来源
.hotel_price {
  font-size: 14px;
}

//酒店信息
.hotel_cont {
  .time {
    display: flex;
    justify-content: space-between;
    color: #666;
  }
  .tag {
    margin: 0 4px;
  }
}

// 用户评价
.user_evaluate {
  padding-bottom: 20px;
  .evaluate_total {
    padding: 20px 0;
  }
  .evaluate_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 300px;
    .average_score {
      position: relative;
      .mark {
        width: 70px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 24px;
        color: rgba(255, 165, 0, 0.3);
        border: 2px solid rgba(255, 165, 0, 0.3);
        border-radius: 50%;
        position: absolute;
        left: 30px;
        top: -30px;
        transform: rotate(-30deg);
      }
    }

    .score {
      position: relative;
      .score_info {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #ff9900;
      }
    }
  }
}
</style>